<template>
  <div class="coverImg">
    <div class="backTo" @click="$router.back()">
      <img
        src="@/assets/images/details/Othermobilephonenumberverificationcodeinputpage_button_return.png"
        alt="1"
      />
    </div>
    <div class="share" @click="showShare = !showShare">
      <img
        src="@/assets/images/details/Scriptdetails_Firstpicture_Scriptfengmian.png"
        alt=""
      />
    </div>
    <div class="placeholder"></div>
  </div>
  <div id="dmInfo">
    <header>
      <!-- dm基本信息组件 -->
      <dm-info v-if="infoObj" :infoObj="infoObj"></dm-info>
    </header>
    <div class="preList">
      <h3>预约列表</h3>
      <dm-detail-book
        v-for="prevItem in prevList"
        :key="prevItem.id"
        :prevItem="prevItem"
      ></dm-detail-book>
    </div>
    <div class="preList">
      <h3>剧本橱窗</h3>
      <show-case :bookList="bookList"></show-case>
    </div>
    <p class="bottomTip">已经到达底部咯</p>
    <div class="bottomBtn">
      <button :class="{ spotBtn: true, active: isSpot }">
        {{ isSpot ? "已关注" : "+关注" }}
      </button>
      <button class="talkBtn">聊一聊</button>
    </div>
  </div>
  <share-view v-model:showShare="showShare"></share-view>
</template>
<script>
import dmDetailBook from "@/components/dmDetailBook.vue";
import showCase from "@/components/showCase.vue";
import dmInfo from "@/components/dmInfo.vue";
import shareView from "@/components/shareView.vue";
import Api from "@/api";
import { Toast } from "vant";

export default {
  components: { dmDetailBook, showCase, dmInfo, shareView },
  data() {
    return {
      isSpot: false, //未关注
      showShare: false, //是否弹出分享
      bookList: [],
      infoObj: null,
      prevList: [],
    };
  },
  created() {
    const dmid = this.$route.params.id;
    this.reqAllData(dmid);
  },
  methods: {
    async reqDmDetail(dmid) {
      const { data } = await Api.getDmDetail(dmid);
      if (data.code) {
        const { bookList, ...tmp } = data.data;
        this.infoObj = { ...tmp };
        this.bookList = data.data.bookList;
        return true;
      } else {
        Toast.fail("服务器开小差了~");
      }
    },
    async reqPrevList(dmid) {
      const { data } = await Api.getDmPrevBookList(dmid);
      this.prevList = data.data;
      return true;
    },
    async reqAllData(dmid) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      const sign = await Promise.all([
        this.reqDmDetail(dmid),
        this.reqPrevList(dmid),
      ]);
      if (sign[0]) {
        Toast.clear();
      }
    },
  },
};
</script>
<style scoped lang="less">
.coverImg {
  height: 4.5rem;
  background-color: #999999;
  position: relative;
  z-index: 22;
}
.backTo,
.share {
  background: transparent;
  position: absolute;
  width: 0.15rem;
  height: 0.15rem;
  top: 0.15rem;
  img {
    height: 100%;
    display: block;
  }
}
.backTo {
  left: 0.2rem;
}
.share {
  right: 0.2rem;
}

.placeholder {
  position: absolute;
  width: 100%;
  height: 0.2rem;
  border-radius: 0.15rem 0.15rem 0 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
}
.preList {
  padding-left: 0.125rem;
  margin-top: 0.3rem;
  h3 {
    font-size: 0.17rem;
    line-height: 0.17rem;
    margin-bottom: 0.18rem;
  }
}
#dmInfo {
  padding-bottom: 0.2rem;
  header {
    width: 100%;
    padding-left: 0.125rem;
  }
  .bottomTip {
    text-align: center;
    color: rgb(153, 153, 153);
    font-size: 0.12rem;
    margin-top: 0.06rem;
  }
  .bottomBtn {
    display: flex;
    height: 0.4rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.15rem;
    color: #fff;
    margin-top: 0.265rem;
    padding: 0 0.125rem;
    .spotBtn {
      background-color: #b56cff;
      border-radius: 0.2rem;
      width: 1.5rem;
      height: 100%;
      text-align: center;
      line-height: 0.4rem;
    }
    .active {
      background-color: rgb(153, 153, 153);
    }
    .talkBtn {
      background-color: #b56cff;
      text-align: center;
      line-height: 0.4rem;
      border-radius: 40px;
      height: 100%;
      width: 1.5rem;
    }
  }
}
</style>
